// 组件手册：https://antd-mobile.gitee.io/zh/components/picker#datepicker
import { Button, DatePicker } from 'antd-mobile'
import dayjs from 'dayjs'
import { useState } from 'react'
import styles from './index.module.scss'

export default function Test() {
  const [pickerShow, setPickerShow] = useState(false)

  const handleConfirm = (value: Date) => {
    console.log('当前选择的日期为', value)
    const birthday = dayjs(value).format('YYYY-MM-DD')
    console.log(birthday)
  }
  return (
    <div className={styles.root}>
      <h1>DatePicker 日期选择器</h1>
      <Button color='primary' onClick={() => setPickerShow(true)}>
        点击打开日期选择器
      </Button>
      <DatePicker
        visible={pickerShow}
        value={new Date('2000-01-01')}
        min={new Date('1960-01-01')}
        max={new Date()}
        onClose={() => setPickerShow(false)}
        onConfirm={(value: Date) => handleConfirm(value)}
      />
    </div>
  )
}
